<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /* 
            当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
            验证的规则是：必须由字母，数字，下划线组成，并且长度在5-12位
        */
        function onclickFun() {
            // 1.先获取标签对象
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernameSpan");
            // innterHTML表示得到标签的内容
            usernameSpanObj.innerHTML;

            if(patt.test(usernameText)) {
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {                
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" />
    <span style="color: red;" id="usernameSpan">
        <img src="right.png" alt="" width="18" height="18">
    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>